<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/Class%20information.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../js/FHL-Class-information.js"></script>
    <script src="../js/FHLjquery-3.4.1.js"></script>

</head>
<body>
    <div id="Cover">
        <div class="elasticrame">
            <a class="delete" href="javascript:void(0);">X</a>
            <div class="Underline"></div>
            <ul>
                <li>班级编号：2019XXX</li>
                <li>班级名称：向日葵班</li>
                <li>指导老师：悠悠老师</li>
                <li>开班日期：2019XXX</li>
                <li>年级：（小）一班  </li>
                <li>班主任电话：1355013XXXX</li>
                <li>人数：29人</li>
                <li>获奖情况：</li>
            </ul>
        </div>
    </div>

    <div id="Cover2"G>
        <div class="elasticrame">
            <a class="delete2" href="javascript:void(0);">X</a>
            <div class="Underline"></div>
            <div class="modal-body"></div>
            <form >
                <div><input type="text"placeholder="#" id="well" class="form-control"></div>
                <div><input type="text"placeholder="班级编号" id="number" class="form-control"></div>
                <div><input type="text"placeholder="班级名称" id="bname" class="form-control"></div>
                <div><input type="text"placeholder="指导老师" id="teacher" class="form-control"></div>
                <div><input type="text"placeholder="开班日期" id="date" class="form-control"></div>
                <div><input type="text"placeholder="年级" id="grade" class="form-control"></div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-primary abb" data-dismiss="modal">增加信息</button>
                </div>
            </form>
        </div>
        </div>
    <div id="Cover3">
        <div class="elasticrame">
            <a class="delete3" href="javascript:void(0);">X</a>
            <div class="Underline"></div>
            <div class="modal-body"></div>
            <form >
                <div><input type="text"placeholder="#" id="aa" class="form-control"></div>
                <div><input type="text"placeholder="班级编号" id="bb" class="form-control"></div>
                <div><input type="text"placeholder="班级名称" id="cc" class="form-control"></div>
                <div><input type="text"placeholder="指导老师" id="dd" class="form-control"></div>
                <div><input type="text"placeholder="开班日期" id="ee" class="form-control"></div>
                <div><input type="text"placeholder="年级" id="ff" class="form-control"></div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-primary olk" data-dismiss="modal">修改</button>
                </div>
            </form>
        </div>
    </div>
    </div>
    <div class="container" id="box">
        <div class="table-responsive" id="The second floor">
            <p>国信国际幼儿园班级管理</p>
            <div class="search">
                <input class="swich" type="" value="" placeholder="请输入班级名称或编号查询">
                    <button class="btn btn-danger sreach">搜索</button>
                <button id="addto" type="button" class="btn btn-danger">
                    <span class="" aria-hidden="true"></span>添加
                </button>
            </div>
        </div>
        <table  class="table table-striped table-hover">
        <tr class="c-form">
            <th></th>
            <th>#</th>
            <th>班级编号</th>
            <th>班级名称</th>
            <th>指导老师</th>
            <th>开班日期</th>
            <th>年级</th>
            <th>功能
            </th>
        </tr>
        <tr class="c-form">
            <td>
                <input class="cube" type="checkbox">
            </td>
            <td>1</td>
            <td>2019001</td>
            <td>向日葵班</td>
            <td>悠悠老师</td>
            <td>2019.5.10</td>
            <td>（小）一班</td>
            <td>
                <button type="button" class="btn btn-default btn-sm details">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细
                </button>
                <button type="button" class="btn btn-default btn-sm rev">
                    <span class="glyphicon glyphicon-plus " aria-hidden="true"></span>修改
                </button>
                <button type="button" class="btn btn-default btn-sm del">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>删除
                </button>
            </td>
        </tr>
        <tr class="c-form">
            <td>
                <input class="cube" type="checkbox">
            </td>
            <td>2</td>
            <td>2019002</td>
            <td>玫瑰班</td>
            <td>果果老师</td>
            <td>2019.5.10</td>
            <td>（小）二班</td>
            <td>
                <button type="button" class="btn btn-default btn-sm details">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细
                </button>
                <button type="button" class="btn btn-default btn-sm rev">
                    <span class="glyphicon glyphicon-plus " aria-hidden="true"></span>修改
                </button>
                <button type="button" class="btn btn-default btn-sm del">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>删除
                </button>
            </td>

        </tr>
        <tr class="c-form">
            <td>
                <input class="cube" type="checkbox">
            </td>
            <td>3</td>
            <td>2019003</td>
            <td>樱花班</td>
            <td>泡泡老师</td>
            <td>2019.5.10</td>
            <td>（小）三班</td>
            <td>
                <button type="button" class="btn btn-default btn-sm details">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细
                </button>
                <button type="button" class="btn btn-default btn-sm rev">
                    <span class="glyphicon glyphicon-plus " aria-hidden="true"></span>修改
                </button>
                <button type="button" class="btn btn-default btn-sm del">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>删除
                </button>
            </td>

        </tr>
        <tr class="c-form">
            <td>
                <input class="cube" type="checkbox">
            </td>
            <td>4</td>
            <td>2019004</td>
            <td>启梦班</td>
            <td>菲菲老师</td>
            <td>2019.5.10</td>
            <td>（大）一班</td>
            <td>
                <button type="button" class="btn btn-default btn-sm details">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细
                </button>
                <button type="button" class="btn btn-default btn-sm rev">
                    <span class="glyphicon glyphicon-plus " aria-hidden="true"></span>修改
                </button>
                <button type="button" class="btn btn-default btn-sm del">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>删除
                </button>
            </td>

        </tr>
        <tr class="c-form">
            <td>
                <input class="cube" type="checkbox">
            </td>
            <td>5</td>
            <td>2019005</td>
            <td>启航班</td>
            <td>伦伦老师</td>
            <td>2019.5.10</td>
            <td>（大）二班</td>
            <td>
                <button type="button" class="btn btn-default btn-sm details">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细
                </button>
                <button type="button" class="btn btn-default btn-sm rev">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改
                </button>
                <button type="button" class="btn btn-default btn-sm del">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>删除
                </button>
            </td>

        </tr>
        </table>
        <div id="allelection">
            <button  type="button" class="btn btn-default btn-sm kk " name="aa">全选</button>
            <button  type="button" class="btn btn-default btn-sm kk">全不选</button>
            <button  type="button" class="btn btn-default btn-sm kk">删除</button>
        </div>
    </div>
        <nav aria-label="Page navigation" id="footer">
            <ul class="pagination">
                <li><a href="#">首页</a></li>
                <li>
                    <a href="JavaScript:void(0)" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="JavaScript:void(0);">1</a></li>
                <li><a href="JavaScript:void(0)">2</a></li>
                <li><a href="JavaScript:void(0)">3</a></li>
                <li><a href="JavaScript:void(0)">4</a></li>
                <li><a href="JavaScript:void(0)">5</a></li>
                <li>
                    <a href="JavaScript:void(0)" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li><a href="JavaScript:void(0)">尾页</a></li>
            </ul>
        </nav>
    </div>
</body>

    <script>
        //删除
        $(document).on("click", ".del", function() {
            $(this).parents("tr").remove()
        });

        //增加
        $(document).on("click",".abb",function(){
            var _arr = [];
            var str = "";
            $("#Cover2").find("input").each(function(){
                _arr.push($(this).val())

            });

            str = '<tr><td><input class="cube" type="checkbox"></td><td>'+_arr[0]+'</td><td>'+_arr[1]+
                '</td><td>'+_arr[2]+'</td>' +'</td><td>'+_arr[3]+'</td><td>'+_arr[4]+'</td><td>'+_arr[5]+
                '<td><button type="button" class="btn btn-default btn-sm details">\n' +
                '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>详细\n' +
                '</button>' + ' <button type="button" class="btn btn-default btn-sm details rev">\n' +
                '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改\n' +
                '</button>'+'<button type="button" class="btn btn-default btn-sm details del">\n' +
                ' <span class="glyphicon glyphicon-plus " aria-hidden="true"></span>删除\n' +
                '</button></td></tr>';
            $(".table").append(str);
            $('#Cover2').hide();
        });

        //修改
        var _this = null;
        $(document).on("click", ".rev", function() {
            $('#Cover3').show();
            var _arr = [];
            _this = $(this).parents("tr");
            $(this).parents("tr").find("td").eq(1).each(function(){
                _arr.push($(this).text())
            });$(this).parents("tr").find("td").eq(2).each(function(){
                _arr.push($(this).text())
            });$(this).parents("tr").find("td").eq(3).each(function(){
                _arr.push($(this).text())
            });$(this).parents("tr").find("td").eq(4).each(function(){
                _arr.push($(this).text())
            });$(this).parents("tr").find("td").eq(5).each(function(){
                _arr.push($(this).text())
            });$(this).parents("tr").find("td").eq(6).each(function(){
                _arr.push($(this).text())
            });
            $("#Cover3").find("input").each(function(i){
                $(this).val(_arr[i])
            })
        });

        $(document).on("click",".olk", function(){
            var _arr = [];
            $("#Cover3").find("input").each(function(){
                _arr.push($(this).val())
            });
            _this.find("td").eq(1).each(function(i){
                $(this).text(_arr[0])
            });
            _this.find("td").eq(2).each(function(i){
                $(this).text(_arr[1])
            });
            _this.find("td").eq(3).each(function(i){
                $(this).text(_arr[2])
            });
            _this.find("td").eq(4).each(function(i){
                $(this).text(_arr[3])
            });
            _this.find("td").eq(5).each(function(i){
                $(this).text(_arr[4])
            }) ;
            _this.find("td").eq(6).each(function(i){
                $(this).text(_arr[5])
            });
            $('#Cover3').hide();
        });
        //搜索
        $(".sreach").click(function(){
            var oS = $(".swich").val();
            if(oS.length==0){
                alert("请输入正确的")
            }else if($("table tr td:contains('"+oS+"')").length==0){
                alert("找不到数据")
            }else{
                $(".table tr:not(:first)").hide();
                $(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
            }

        })
    </script>
</html>